<template>
	<view class="page">
		<view class="modules">
			<view class="module" v-for="(item,index) in items" :key="index">
				<view class="module-main bg-hover" @tap="itemToDetail(item)">
					<u-image width="80rpx" height="80rpx" radius="4rpx" :src="item.icon"></u-image>
					<view class="module-main__title">{{item.name}}</view>
				</view>
				<view class="module-btns">
					<view class="module-btn bg-hover" @tap="deleteHandle(item,index)">
						<u-image width="30rpx" height="30rpx"
							src="https://file.casugn.com/storecompcard/static/img/edit／delete@2x_1681976320248.png"></u-image>
						<text class="module-btn__text">删除</text>
					</view>
					<view class="module-btn bg-hover" @tap="editHandle(item,index)">
						<u-image width="30rpx" height="30rpx"
							src="https://file.casugn.com/storecompcard/static/img/edit／edit@2x_1681976335066.png"></u-image>
						<text class="module-btn__text">编辑</text>
					</view>
				</view>
			</view>
		</view>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="21.7vh" width="240rpx" height="240rpx" text="暂时没有产品" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/空页面@2x(6)_1681114072965.png"></u-empty>
			<u-button color="#276AEE" throttleTime="500"
				:customStyle="{width:'232rpx', height:'64rpx', marginTop:'16rpx', fontSize:'28rpx'}"
				@click="addHandle">提交产品信息</u-button>
		</template>

		<template v-if="loadMoreStatus==='loading'">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus" @loadmore="scrolltolower" />
		</template>

		<template v-if="items.length">
			<cus-add-btn :safeAreaInsetBottom="true" @click="addHandle"></cus-add-btn>
		</template>

		<product-info-popup ref="ProductInfoPopup" @refresh="refresherrefresh"></product-info-popup>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import ProductInfoPopup from './components/product-info-popup.vue'

	export default {
		components: { ProductInfoPopup },
		data() {
			return {
				categoryId: '',
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore

				refresh: false
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		onLoad(option) {
			this.categoryId = option.id
			this.loadMoreStatus = 'loading'
			this.getDBData()
		},
		onShow() {
			let pages = getCurrentPages(); // 获取当前页面栈
			let curPage = pages[pages.length - 1]; // 当前页面
			if (curPage.refresh) {
				curPage.refresh = false;
				this.refresherrefresh()
			}
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			itemToDetail(item) {
				// console.log(item);
				let data = encodeURI(JSON.stringify(item))
				this.$goToPage(
					`/pagesCard/addProductDetail/addProductDetail?item=${data}&id=${item.id||''}&name=${item.name||''}&detailId=${item.detailId||''}`
				)
			},
			addHandle() {
				this.$refs.ProductInfoPopup.add({ categoryId: this.categoryId })
			},
			deleteHandle(item, index) {
				const that = this
				uni.showModal({
					title: '警告! ',
					content: `该操作将删除产品 [${item.name}] 及下级产品详情`,
					success: async (res) => {
						if (res.confirm) {
							let res = await that.$api.delProductInfoById(item.id)
							if (res.success) {
								uni.showToast({ title: '删除成功！', icon: 'none' });
								that.items.splice(index, 1)
							} else {
								uni.showToast({ title: res.message || '删除失败！', icon: 'none' });
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			editHandle(item, index) {
				this.$refs.ProductInfoPopup.edit({ ...item, categoryId: this.categoryId })
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					companyId: this.userInfo.companyId,
					categoryId: this.categoryId,
					isDel: 0,
					column: 'createTime',
					order: 'desc',
				}
				let res = await this.$api.getProductInfoList(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('产品列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.modules {
		padding: 24rpx 32rpx;

		.module {
			background-color: #fff;
			border-radius: 16rpx;

			&:nth-child(n+2) {
				margin-top: 24rpx;
			}

			.module-main {
				position: relative;
				padding: 32rpx 24rpx 16rpx;

				display: flex;
				align-items: center;

				&::before {
					content: "";
					position: absolute;
					bottom: 0;
					left: 24rpx;
					right: 24rpx;
					border-bottom: 1rpx dashed #E5E6EB;
				}

				.module-main__title {
					margin-left: 16rpx;
					font-size: 28rpx;
					font-weight: 600;
					//color: #1D2129;
          color: #276AEE;
					line-height: 40rpx;
				}
			}

			.module-btns {
				padding: 16rpx 24rpx;

				display: flex;
				align-items: center;

				.module-btn {
					width: 100%;
					height: 56rpx;
					border-radius: 4rpx;

					display: flex;
					justify-content: center;
					align-items: center;

					.module-btn__text {
						margin-left: 8rpx;
						font-size: 28rpx;
						color: #4E5969;
						line-height: 40rpx;
					}
				}
			}
		}
	}
</style>
